<template>
	<el-container style="height: 100vh;">
		<el-header>
			<div class="header">
				<div class="left">
					<a href="/index" class="logo"><img src="@/assets/logo.png" /></a>
					<a href="javascript:;">艺恩专注数据服务12年</a>
					<el-input placeholder="请输入影片、影院等搜索" suffix-icon="el-icon-search" v-model="input"
						style="width:260px;">
					</el-input>
				</div>
				<div class="right">
					<div class="df">
						艺恩娱数-电影
						<i class="el-icon-arrow-down"></i>
					</div>
					<el-button type="primary">登录/注册</el-button>
				</div>
			</div>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<el-menu style="height: 100%" :router="true">
					<el-submenu index="/admin/DataMarket">
						<template slot="title">
							<i class="el-icon-s-data"></i>
							<span slot="title">数据大盘</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/index">行业大盘</el-menu-item>
							<el-menu-item index="/boxoffice">票房大盘</el-menu-item>
							<el-menu-item index="1-3">排片大盘</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-s-ticket"></i>
							<span slot="title">票房分析</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="2-1">票房榜</el-menu-item>
							<el-menu-item index="2-2">影片票房</el-menu-item>
							<el-menu-item index="2-3">影院票房</el-menu-item>
							<el-menu-item index="2-4">省市票房</el-menu-item>
							<el-menu-item index="2-5">境外票房</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title">
							<i class="el-icon-s-marketing"></i>
							<span slot="title">排片分析</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="3-1">影片排片</el-menu-item>
							<el-menu-item index="3-2">影院排片</el-menu-item>
							<el-menu-item index="3-3">省市排片</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="4">
						<template slot="title">
							<i class="el-icon-document-copy"></i>
							<span slot="title">宣发舆情</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="4-1">认知指数</el-menu-item>
							<el-menu-item index="4-2">购票指数</el-menu-item>
							<el-menu-item index="4-3">口碑指数</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="5">
						<template slot="title">
							<i class="el-icon-mobile"></i>
							<span slot="title">情报</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="5-1">投资情报</el-menu-item>
							<el-menu-item index="5-2">发行情报</el-menu-item>
							<el-menu-item index="5-3">影院情报</el-menu-item>
							<el-menu-item index="5-4">植入广告</el-menu-item>
							<el-menu-item index="5-5">行业分析</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-menu-item @click="centerDialogVisible = true">
						<template slot="title">
							<i class="el-icon-s-custom"></i>
							<span slot="title">个人中心</span>
						</template>
					</el-menu-item>
					<el-dialog :visible.sync="centerDialogVisible">
						<el-tabs v-model="activeName">
							<el-tab-pane label="注册账号" name="first">
								<div class="tel">
									<span>手机</span>
									<el-input v-model="user.tel" placeholder="请输入内容"></el-input>
								</div>
								<div class="psd">
									<span>密码</span>
									<el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
								</div>

							</el-tab-pane>
							<el-tab-pane label="密码登录" name="second">
								<div class="tel">
									<span>手机</span>
									<el-input v-model="user.tel" placeholder="请输入内容"></el-input>
								</div>
								<div class="psd">
									<span>密码</span>
									<el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
								</div>
							</el-tab-pane>
						</el-tabs>

					</el-dialog>
					<el-menu-item index="7">
						<template slot="title">
							<i class="el-icon-shopping-cart-full"></i>
							<span slot="title">续费购买</span>
						</template>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: true,
				input: '',
				centerDialogVisible: false,
				activeName: 'first',
				user: {
					tel: "",
					password: "",
				},
			};
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.el-header {
		height: 54px !important;
		width: 100%;
		box-shadow: 0 0 8px rgb(0 25 141 / 12%);
		border-radius: 2px;
		padding: 0;
		z-index: 100;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.el-header .header {
		height: 100%;
		padding: 12px 0;
		padding-right: 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.el-header .header .left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.header .left .logo {
		margin: 0 5px 0 15px;
	}

	.header .left a:nth-of-type(2) {
		border-left: 1px solid rgb(135, 131, 142);
		padding-left: 5px;
		margin-left: 3px;
		font-size: 12px;
		margin-right: 30px;
	}

	.header .right {
		display: flex;
		align-items: center;
	}

	.header .right .df {
		margin-right: 15px;
		line-height: 14px;
		margin: 0 5px;
		font-size: 14px;
		border: 1px solid #dcdcdc;
		padding: 6px;
		border-radius: 3px;
		cursor: pointer;
		color: #7030A0;
	}

	.header .right .df:hover {
		background-color: #F2F5FC;
	}

	.header .right .el-button {
		padding: 7px 10px;
		font-size: 12px;
		background-color: #7030A0;
		border-color: #7030A0;
		margin-left: 10px;
	}

	.right .el-button:hover {
		background-color: #8D59B3;
		border-color: #8D59B3;
	}

	.el-main {
		background-color: #E5E5E5;
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog {
		width: 350px;
		height: 430px;
		padding: 10px;
		background-color: #fff !important;
	}

	.el-tabs__nav {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.el-tabs__item {
		padding: 0 15px;
		font-size: 24px;
		color: #454555;
		/* position: relative; */
		cursor: pointer;
	}

	.el-tabs__item:hover {
		color: #7030A0;
	}

	.el-tabs__item.is-active {
		color: #7030a0;
		
	}

	.el-tabs__nav-wrap::after {
		content: "";
	}

	.tel,.psd {
		display: flex;

		span {
			flex-basis: 10%;
		}
		.el-input__inner{
			flex: 1;
			border: none;
			background-color: transparent;
		}
	}
</style>
